import React from 'react';
import ReactEcharts from '@/components/Echarts';
import { history } from 'umi';
import moment from 'moment';

const DemandChart = props => {
    const { data = [], companyId } = props;
    const [yAxisData, setYAxisData] = React.useState([]);
    const [workData, setWorkData] = React.useState([]);
    const [requireData, setRequireData] = React.useState([]);
    const getData = () => {
        const yAxisDataArr = [];
        const workDataArr = [];
        const requireDataArr = [];
        data.map(item => {
            yAxisDataArr.push(item.departmentName);
            workDataArr.push({
                value: item.workNum,
                departmentId: item.departmentId
            });
            requireDataArr.push({
                value: item.requireNum,
                departmentId: item.departmentId
            });
            return '';
        });

        setYAxisData(yAxisDataArr);
        setWorkData(workDataArr);
        setRequireData(requireDataArr);
    };
    const handleChartClick = params => {
        history.push({
            pathname: '/office/personnelManagement/recruit/position',
            query: {
                companyId,
                departmentId: params.data.departmentId,
                startTime: moment()
                    .startOf('quarter')
                    .format('YYYY-MM-DD'),
                endTime: moment()
                    .endOf('quarter')
                    .format('YYYY-MM-DD')
            }
        });
    };
    const option = {
        color: ['#FFA808', '#FFCD44'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: ['在职员工', '招聘人数'],
            top: 0,
            left: 0,
            textStyle: {
                color: '#8C8C8C',
                fontSize: 12
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    // 属性lineStyle控制线条样式
                    color: 'rgba(0,0,0,0.15)',
                    width: 1,
                    type: 'solid'
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    // 属性lineStyle控制线条样式
                    color: '#A0A4AA',
                    width: 1,
                    type: 'solid'
                }
            },
            axisTick: {
                show: false
            },
            splitArea: {
                show: false
            }
        },
        yAxis: {
            type: 'category',
            data: yAxisData,
            splitLine: {
                show: false,
                lineStyle: {
                    // 属性lineStyle控制线条样式
                    color: 'rgba(0,0,0,0.15)',
                    width: 1,
                    type: 'solid'
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    // 属性lineStyle控制线条样式
                    color: '#A0A4AA',
                    width: 1,
                    type: 'solid'
                }
            }
        },
        series: [
            {
                name: '在职员工',
                type: 'bar',
                stack: '总量',
                barMaxWidth: 50,
                data: workData
            },
            {
                name: '招聘人数',
                type: 'bar',
                stack: '总量',
                data: requireData
            }
        ],
        dataZoom: [
            {
                type: 'slider',
                show: true,
                yAxisIndex: [0],
                start: 0,
                end: 90,
                width: 10,
                handleIcon:
                    'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '80%',
                showDetail: false,
                showDataShadow: false
            }
        ]
    };
    React.useEffect(() => {
        getData();
    }, [data]);
    return <ReactEcharts onEvents={{ click: handleChartClick }} option={option} />;
};

export default DemandChart;
